<template>
    <div>
        <Layout class-prefix="details">
            <Range class="range-tab" :selectedRange.sync="selectedRange"/>
            <RecordDisplay class="display-list" :range="selectedRange"/>
        </Layout>
    </div>
</template>

<script lang="ts">
    import Vue from 'vue';
    import Range from '@/components/Range.vue';
    import {Component, Prop, Watch} from 'vue-property-decorator';
    import RecordDisplay from '@/components/RecordDisplay.vue';

    @Component({
        components: {
            Range,
            RecordDisplay
        },
        mounted() {
            this.$store.commit('fetchRecords');
        }
    })
    export default class Details extends Vue {
        selectedRange = 'day';
    }
</script>

<style lang="scss">

    .details-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .display-list {
        flex-grow: 1;
        overflow: auto;
    }

</style>

<style lang="scss" scoped>

</style>